<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span class="card-title">七月居民消费价格指数</span>
			<el-tooltip class="item" effect="dark" content="指标说明" placement="top">
				<el-button style="float: right;padding: 0" type="text">
					<i class="el-icon-share" />
				</el-button>
			</el-tooltip>
		</div>
		<div ref="main" style="width: 400px;height:400px;"></div>
		<!-- <div><el-tag type="success" size="medium">医疗保健类</el-tag></div> -->
		<div>
			<el-alert title="医疗保健类" type="success" center show-icon :closable="false">
			</el-alert>
		</div>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				cpi: {
					cpi: 0.0,
					type: '',
					province: '',
					represent_time: ''

				}
			}
		},
		methods: {
			showPie1() {
				// let myEcharts = this.$echarts.init(document.getElementById("main1"))
				let myEcharts = this.$echarts.init(this.$refs.main)
				this.$http.get('apis/cpi/select', {
					params: {
						date: '2022-05',
						page: 1,
						province: '',
						size: 32,
						type: '居民消费价格指数'
					}
				}).then(res => {
					console.log(res)
					// console.log(res.data.data[0].province)
					let provincesAndCpis = []
					for (let i = 0; i < res.data.data.length; i++) {
						provincesAndCpis.push({
							name: res.data.data[i].province,
							value: res.data.data[i].cpi
						})
					}
					let option = {
						tooltip: {
							trigger: 'item'
						},
						series: [{
							name: '省份',
							type: 'pie',
							radius: '50%',
							data: provincesAndCpis,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					myEcharts.setOption(option)
					window.onresize = function() {
						myEcharts.resize();
					};
				}) .catch(function (error) {
					console.log(error);
				});
			},

		},
		mounted() {
			this.showPie1()
		}
	}
</script>

<style>
	.card-title {
		font-size: 26px;
	}

	.el-icon-share {
		font-size: 26px;
	}

	.item {
		margin-bottom: 14px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 430px;
	}
</style>
